<template>
  <div class="animal-container">
    <!-- 头部banner -->
    <div class="animal-banner">
      <div class="banner-content">
        <h1 class="banner-title">动物圈 - 探索奇妙的动物世界</h1>
        <p class="banner-subtitle">了解各种萌宠、野生动物的精彩故事和知识</p>
      </div>
    </div>

    <!-- 内容分类标签 -->
    <div class="animal-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        class="category-tab"
        :class="{ active: activeCategory === category.id }"
        @click="activeCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 萌宠精选 -->
    <div class="pet-showcase-section">
      <div class="section-header">
        <h2>萌宠精选</h2>
        <a href="#" class="more-link">更多萌宠 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="pet-showcase-grid">
        <div 
          v-for="pet in petShowcases" 
          :key="pet.id"
          class="pet-card"
          @click="viewDetails('pet', pet.id)"
        >
          <div class="pet-image-container">
            <img :src="pet.image" :alt="pet.name" class="pet-image">
          </div>
          <div class="pet-info">
            <h3 class="pet-name">{{ pet.name }}</h3>
            <p class="pet-type">{{ pet.type }} · {{ pet.age }}</p>
            <p class="pet-description">{{ pet.description }}</p>
            <div class="pet-actions">
              <button class="like-btn" @click.stop="likePet(pet.id)">
                <i class="fa fa-heart"></i> {{ pet.likes }}
              </button>
              <button class="detail-btn">查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 野生动物世界 -->
    <div class="wildlife-section">
      <div class="section-header">
        <h2>野生动物世界</h2>
        <a href="#" class="more-link">探索更多 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="wildlife-grid">
        <div 
          v-for="animal in wildAnimals" 
          :key="animal.id"
          class="wildlife-card"
          @click="viewDetails('wildlife', animal.id)"
        >
          <div class="wildlife-image-container">
            <img :src="animal.image" :alt="animal.name" class="wildlife-image">
            <div class="danger-level" :class="`danger-${animal.dangerLevel === '高' ? 'high' : 'low'}`">
              危险等级：{{ animal.dangerLevel }}
            </div>
          </div>
          <div class="wildlife-info">
            <h3 class="wildlife-name">{{ animal.name }}</h3>
            <p class="wildlife-habitat"><i class="fa fa-map-marker"></i> {{ animal.habitat }}</p>
            <p class="wildlife-description">{{ animal.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 趣味动物知识 -->
    <div class="knowledge-section">
      <div class="section-header">
        <h2>趣味动物知识</h2>
        <a href="#" class="more-link">更多知识 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="knowledge-grid">
        <div 
          v-for="knowledge in animalKnowledge" 
          :key="knowledge.id"
          class="knowledge-card"
          @click="viewDetails('knowledge', knowledge.id)"
        >
          <div class="knowledge-image-container">
            <img :src="knowledge.image" :alt="knowledge.title" class="knowledge-image">
          </div>
          <div class="knowledge-info">
            <h3 class="knowledge-title">{{ knowledge.title }}</h3>
            <p class="knowledge-description">{{ knowledge.description }}</p>
            <div class="knowledge-stats">
              <i class="fa fa-eye"></i> {{ knowledge.views }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 宠物训练技巧 -->
    <div class="training-section">
      <div class="section-header">
        <h2>宠物训练技巧</h2>
        <a href="#" class="more-link">全部技巧 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="training-grid">
        <div 
          v-for="tip in trainingTips" 
          :key="tip.id"
          class="training-card"
          @click="viewDetails('training', tip.id)"
        >
          <div class="training-image-container">
            <img :src="tip.image" :alt="tip.title" class="training-image">
          </div>
          <div class="training-info">
            <h3 class="training-title">{{ tip.title }}</h3>
            <p class="training-description">{{ tip.description }}</p>
            <div class="training-meta">
              <span class="difficulty" :class="`difficulty-${tip.difficulty === '初级' ? 'easy' : tip.difficulty === '中级' ? 'medium' : 'hard'}`">
                <i class="fa fa-signal"></i> {{ tip.difficulty }}
              </span>
              <span class="duration">
                <i class="fa fa-clock-o"></i> {{ tip.duration }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门视频推荐 -->
    <div class="videos-section">
      <div class="section-header">
        <h2>热门视频</h2>
        <a href="#" class="more-link">更多视频 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="videos-grid">
        <div 
          v-for="video in popularVideos" 
          :key="video.id"
          class="video-card"
        >
          <div class="video-thumbnail-container">
            <img :src="video.thumbnail" :alt="video.title" class="video-thumbnail">
            <div class="video-duration">{{ video.duration }}</div>
          </div>
          <div class="video-info">
            <h3 class="video-title">{{ video.title }}</h3>
            <div class="video-stats">
              <span class="video-views"><i class="fa fa-play"></i> {{ video.views }}</span>
              <span class="video-likes"><i class="fa fa-thumbs-up"></i> {{ video.likes }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnimalView',
  data() {
    return {
      activeCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'pet', name: '萌宠' },
        { id: 'wild', name: '野生动物' },
        { id: 'knowledge', name: '动物知识' },
        { id: 'training', name: '宠物训练' },
      ],
      // 萌宠精选数据
      petShowcases: [
        {
          id: 1,
          name: '奶糖',
          type: '英国短毛猫',
          age: '2岁',
          image: '/src/assets/周杰伦.png',
          description: '性格温顺粘人，喜欢撒娇，是家中的开心果',
          likes: 12345,
        },
        {
          id: 2,
          name: '可乐',
          type: '拉布拉多犬',
          age: '3岁',
          image: '/src/assets/周杰伦.png',
          description: '聪明活泼，擅长接飞盘，是运动小能手',
          likes: 9876,
        },
        {
          id: 3,
          name: '奥利奥',
          type: '边牧',
          age: '1岁半',
          image: '/src/assets/悟空.jpg',
          description: '智商爆表，学习能力强，能听懂多种指令',
          likes: 15678,
        },
        {
          id: 4,
          name: '布丁',
          type: '布偶猫',
          age: '1岁',
          image: '/src/assets/黑悟空.jpg',
          description: '颜值担当，毛量丰富，性格超级温顺',
          likes: 21034,
        },
      ],
      // 野生动物世界数据
      wildAnimals: [
        {
          id: 1,
          name: '非洲狮',
          habitat: '非洲草原',
          image: '/src/assets/悟空.jpg',
          description: '草原之王，群居动物，雄狮负责保护领地，雌狮负责捕猎',
          dangerLevel: '高',
        },
        {
          id: 2,
          name: '东北虎',
          habitat: '中国东北',
          image: '/src/assets/周杰伦.png',
          description: '世界上最大的猫科动物，独居，擅长伏击捕猎',
          dangerLevel: '高',
        },
        {
          id: 3,
          name: '大熊猫',
          habitat: '中国四川',
          image: '/src/assets/悟空.jpg',
          description: '中国国宝，以竹子为主食，珍稀保护动物',
          dangerLevel: '低',
        },
        {
          id: 4,
          name: '长颈鹿',
          habitat: '非洲草原',
          image: '/src/assets/黑悟空.jpg',
          description: '世界上最高的动物，脖子长达2米，以树叶为食',
          dangerLevel: '低',
        },
      ],
      // 趣味动物知识数据
      animalKnowledge: [
        {
          id: 1,
          title: '猫咪为什么喜欢舔毛？',
          image: '/src/assets/周杰伦.png',
          description: '猫咪舔毛不仅是为了清洁，还能调节体温、舒缓压力',
          views: 56789,
        },
        {          id: 2,          title: '狗狗摇尾巴的含义',          image: '/src/assets/悟空.jpg',          description: '不同方向的摇尾代表不同情绪，向右摇表示开心，向左摇表示紧张',          views: 45678        },
        {
          id: 3,
          title: '鹦鹉为什么能学人说话？',
          image: '/src/assets/悟空.jpg',
          description: '鹦鹉的鸣管结构特殊，能模仿人类声音，但它们并不理解含义',
          views: 34567,
        },
        {
          id: 4,
          title: '大象的记忆力有多好？',
          image: '/src/assets/黑悟空.jpg',
          description: '大象能记住多年前的水源位置和同伴，记忆力可维持几十年',
          views: 23456,
        },
      ],
      // 宠物训练技巧数据
      trainingTips: [
        {          id: 1,          title: '如何训练狗狗定点排便',          image: '/src/assets/周杰伦.png',          description: '掌握正确的训练时机和奖励方式，耐心引导很重要',          difficulty: '初级',          duration: '1-2周'        },
        {
          id: 2,
          title: '猫咪不抓沙发的秘诀',
          image: '/src/assets/周杰伦.png',
          description: '提供合适的猫抓板，使用猫薄荷吸引，及时纠正错误行为',
          difficulty: '中级',
          duration: '2-3周',
        },
        {
          id: 3,
          title: '如何让鹦鹉说话',
          image: '/src/assets/悟空.jpg',
          description: '选择安静的环境，重复简单词汇，结合食物奖励',
          difficulty: '高级',
          duration: '1-3个月',
        },
        {
          id: 4,
          title: '训练兔子上厕所',
          image: '/src/assets/黑悟空.jpg',
          description: '观察兔子习性，放置合适的厕所，及时清理保持清洁',
          difficulty: '初级',
          duration: '1-2周',
        },
      ],
      // 热门视频数据
      popularVideos: [
        {
          id: 1,
          title: '萌宠日常：奶糖的幸福生活',
          thumbnail: '/src/assets/周杰伦.png',
          duration: '02:35',
          views: '12.5万',
          likes: '3.2万',
        },
        {
          id: 2,
          title: '可乐学新技能，太聪明了！',
          thumbnail: '/src/assets/黑悟空.jpg',
          duration: '01:48',
          views: '8.9万',
          likes: '2.1万',
        },
        {
          id: 3,
          title: '非洲野生动物大迁徙',
          thumbnail: '/src/assets/悟空.jpg',
          duration: '05:22',
          views: '23.7万',
          likes: '5.6万',
        },
        {
          id: 4,
          title: '猫咪行为解析：为什么它们总是那么神秘？',
          thumbnail: '/src/assets/黑悟空.jpg',
          duration: '04:15',
          views: '15.3万',
          likes: '4.8万',
        },
      ],
    }
  },
  methods: {
    // 处理分类切换
    changeCategory(categoryId) {
      this.activeCategory = categoryId
      // 这里可以根据分类筛选内容
    },
    // 点赞功能
    likePet(petId) {
      const pet = this.petShowcases.find(p => p.id === petId)
      if (pet) {
        pet.likes++
      }
    },
    // 查看详情
    viewDetails(type, id) {
      console.log(`查看${type}详情，ID: ${id}`)
      // 这里可以实现页面跳转或弹窗详情
    },
  },
}
</script>

<style scoped>
/* 动物页面容器 */
.animal-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 50px;
}

/* 头部banner */
.animal-banner {
  position: relative;
  height: 400px;
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.banner-content {
  text-align: center;
  color: white;
  z-index: 1;
}

.banner-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  font-size: 20px;
  opacity: 0.9;
}

/* 分类标签 */
.animal-categories {
  background-color: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
}

.category-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.category-tab:hover {
  color: #4CAF50;
}

.category-tab.active {
  color: white;
  background-color: #4CAF50;
}

/* 通用区域样式 */
.pet-showcase-section,
.wildlife-section,
.knowledge-section,
.training-section,
.videos-section {
  margin: 30px 20px;
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #4CAF50;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-link:hover {
  text-decoration: underline;
}

/* 萌宠精选网格 */
.pet-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.pet-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.pet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.pet-image-container {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pet-card:hover .pet-image {
  transform: scale(1.05);
}

.pet-info {
  padding: 20px;
}

.pet-name {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

.pet-type {
  color: #666;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.pet-description {
  color: #555;
  line-height: 1.5;
  margin-bottom: 15px;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pet-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like-btn {
  background: none;
  border: 1px solid #ff5252;
  color: #ff5252;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-btn:hover {
  background: #ff5252;
  color: white;
}

.detail-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.detail-btn:hover {
  background: #2E7D32;
}

/* 野生动物世界网格 */
.wildlife-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.wildlife-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.wildlife-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.wildlife-image-container {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.wildlife-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wildlife-card:hover .wildlife-image {
  transform: scale(1.05);
}

.danger-level {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.danger-high {
  background: rgba(255, 82, 82, 0.9);
  color: white;
}

.danger-low {
  background: rgba(76, 175, 80, 0.9);
  color: white;
}

.wildlife-info {
  padding: 20px;
}

.wildlife-name {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

.wildlife-habitat {
  color: #666;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.95rem;
}

.wildlife-description {
  color: #555;
  line-height: 1.5;
  height: 70px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 趣味动物知识列表 */
.knowledge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.knowledge-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.knowledge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.knowledge-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 12px;
}

.knowledge-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  font-size: 1.5rem;
}

.knowledge-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

.knowledge-content {
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

.knowledge-source {
  font-size: 0.85rem;
  color: #999;
  text-align: right;
}

/* 宠物训练技巧网格 */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.training-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.training-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.training-image-container {
  position: relative;
  overflow: hidden;
  height: 180px;
}

.training-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.training-card:hover .training-image {
  transform: scale(1.05);
}

.training-info {
  padding: 20px;
}

.training-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.training-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.training-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.difficulty {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
}

.difficulty-easy {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.difficulty-medium {
  background: rgba(255, 193, 7, 0.2);
  color: #FFC107;
}

.difficulty-hard {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}

.duration {
  font-size: 0.9rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 热门视频推荐网格 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.video-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.video-image-container {
  position: relative;
  overflow: hidden;
  height: 180px;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-card:hover .video-thumbnail {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.video-content {
  padding: 16px;
}

.video-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.video-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.9rem;
  color: #999;
}

.video-views,
.video-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pet-showcase-grid,
  .wildlife-grid,
  .knowledge-list,
  .training-grid,
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .pet-showcase-section,
  .wildlife-section,
  .knowledge-section,
  .training-section,
  .videos-section {
    margin: 20px 15px;
    padding: 20px;
  }
  
  .banner-title {
    font-size: 2.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 2rem;
  }
  
  .banner-subtitle {
    font-size: 1rem;
  }
  
  .animal-categories {
    padding: 12px;
    gap: 8px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .pet-card,
  .wildlife-card,
  .knowledge-card,
  .training-card,
  .video-card {
    border-radius: 8px;
  }
  
  .pet-image-container,
  .wildlife-image-container,
  .video-image-container {
    height: 180px;
  }
}
</style>